<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  layout:decorator="layout">
  <head>
    <title>欢迎进入管理系统</title>
    <script type="text/javascript">
    	//加载参数
    	var loadParam = function(obj){
   			if($(obj).val() == '' && $(obj).parent().parent().next().is("tr")){
   				$(obj).parent().parent().remove();
   			}
   			if($(obj).val() != '' && !$(obj).parent().parent().next().is("tr")){
   				var key = $(obj).val();
   				var desc = $(obj).parent().parent().find("textarea[name='desc']").val();
   				$("#paramTable").loadAddData({list:[{}]});
   			}
    	}
    	
    	//修改信息
    	var changeDesc = function(id, type, obj){
    		var desc = $(obj).val();
    		$.ajax({url: "/index-descSave", type: "POST", dataType: "json",
    		    data: {id:id,desc:desc,type:type},
    		    success: function (res) {
					    	    		        
    		    }
    		})
    	}
    	
    	//批量删除
    	var batchRemove = function(){
    		var data = "";
    		$("input[name='boxId']:checked").each(function(i,v){
    			data += $(v).val()+","
    		});
    		$.ajax({url: "/index-remove", type: "POST", dataType: "json",
    		    data: {data:data},
    		    success: function (res) {
    		    	clickWork();		        
    		    }
    		})
    	}
    	
    	var clickModel = function(sysId, modelId){
    		var map = {"name":"默认模块","description":"默认模块"};
    		var data = [];
    		if(modelId != null){
    			var model = getArrayObj(menu.models, modelId);
    			map.name=model.name;
				map.description=model.description;
    			$.each(menu.apis, function(i,v){
        			if(v.modelId == modelId){
        				data.push(v);
        			}
        		});
    		} else {
    			$.each(menu.apis, function(i,v){
        			if(v.sysId == sysId){
        				data.push(v);
        			}
        		});
    		}
    		map.apis = data;
    		$("#apiTable").loadData(map);
    		
    	}
    	
    	var getArrayObj = function(list, id){
    		var data = null;
    		$.each(list, function(i,v){
       			if(v.id == id){
       				data = v;
       			}
       		});
    		return data;
    	}
    	
    	var clickApi = function(apiId){
    		var data = [];
    		var api = getArrayObj(menu.apis, apiId);
    		$("#searchType").html(api.type);
    		var paramGet = JSON.parse(api.paramGet);
    		var paramGetList = [];
    		$.each(paramGet, function(k,v){
    			paramGetList.push({key:k,value:v})
    		})
    		paramGetList.push({});
    		$("#paramTable").loadData({list:paramGetList});
			$("#bodyParam").val(api.paramBody);
    		
			var sys = getArrayObj(menu.syss, api.sysId);
			$("#search").val(sys.name+api.url);
			
   			$.each(menu.tests, function(i,v){
       			if(v.apiId == apiId){
       				data.push(v);
       			}
       		});
    		$("#testTable").loadData({tests:data});
    		clickReq();
    	}
    	
    	
    	var menu = null;
    	
    	var initMenu = function() {
    		$.ajaxData({url:"index-menu", success:function(data){
    			$("#menuTable").loadData(data.obj);
    			menu = data.obj;
    		}})
    	}
    	
    	//验证请求地址
    	var checkSeachUrl = function(){
    		var searchUrl = $("#search").val();
    		var url = searchUrl.split("?");
    		if(url.length >1){
    			var param = url[1].split("&");
    			
    			$.each(param, function(i,v){
    				var kv = v.split("=");
    				if(kv.length > 1){
    					$("#paramTable").loadAddData({list:[{key:kv[0],value:kv[1]}]});
    				}
    			});
    			$("input[name='key']").change();
    			$("#search").val(url[0]);
    		}
    		changeReqInfo();
    		clickReq();
    	}
    	
    	var clickReq = function(){
    		$("#req").show();
    		$("#work").hide();
    		$(".table-nav-tabs").find(".active").removeClass("active");
    		$("#reqBtn").addClass("active");
    		var searchUrl = $("#search").val();
    		var searchType = $("#searchType").html();
    		if(searchType=='POST'){
    			$('#bodyHtml').show();
    		} else {
    			$('#bodyHtml').hide();
    		}
    	}
    	
    	var changeReqInfo = function(){
    		var searchUrl = $("#search").val();
    		var searchType = $("#searchType").html();
    		if(searchType=='POST'){
    			$('#bodyHtml').show();
    		} else {
    			$('#bodyHtml').hide();
    		}
    		$.ajaxData({url: "/index-url", type: "GET", dataType: "json", data: {url:searchUrl, type:searchType},
    		    success: function (res) {
    		    	if(res.success && res.obj.api!=null){
    		    		clickApi(res.obj.api.id);
    		    	}
    		    }
    		})
    	}
    	
    	var clickWork = function(){
    		$("#work").show();
    		$("#req").hide();
    		$(".table-nav-tabs").find(".active").removeClass("active");
    		$("#workBtn").addClass("active")
    		
    		var searchUrl = $("#search").val();
    		var searchType = $("#searchType").html();
   			$.ajaxData({url: "/index-url", type: "GET", dataType: "json", data: {url:searchUrl, type:searchType},
    		    success: function (res) {
    		    	if(res.success){
    		    		var getParam=[];
    		    		var bodyParam=[];
    		    		$.each(res.obj.params,function(i,v){
    		    			if(v.type == 'MAP'){
    		    				v.name = (v.name==null?"":v.name+" ")+'{...}';
    		    			} else if(v.type == 'LIST'){
    		    				v.name = (v.name==null?"":v.name+" ")+'[...]';
    		    			}
    		    			if(v.contentType=='GET'){
    		    				getParam[getParam.length]=v;
    		    			} else {
    		    				bodyParam[bodyParam.length]=v;
    		    			}
    		    		});
    		    		
    		    		$.each(res.obj.ress,function(i,v){
    		    			if(v.type == 'MAP'){
    		    				v.name = (v.name==null?"":v.name+" ")+'{...}';
    		    			} else if(v.type == 'LIST'){
    		    				v.name = (v.name==null?"":v.name+" ")+'[...]';
    		    			}
    		    		});
    		    		$("#paramTableWork").loadData({list:getParam});
    		    		$("#bodyTableWork").loadData({list:bodyParam});
						$("#retTableWork").loadData({list:res.obj.ress});
						$("#apiWork").loadData({api:res.obj.api});
						
						$("#retWork,#bodyWork").each(function(i,v){
			    			$(v).find("tr[name='treeParam']").each(function(i2,v2){
			    				var parentId = $(v2).attr("data-tt-id");
			    				$(v2).after($(v).find("tr[data-tt-parent-id='"+parentId+"']"));
			    			});
			    		});
						
						$("#retWork,#bodyWork").treetable({expandable:false,
						    theme:'vsStyle',
						    expandLevel : 10,
						    column:1,
						    onSelect : function($treeTable, id) {
						        window.console;
						    }
						});
    		    	} else {
    		    		$.jjalert({text:"接口还没有调通，请先调通接口",yesBtn:"去调通", yes:function(){
    		    			clickReq();
    		    		}});
    		    		
    		    	}
    		    }
    		})
    	}
    	
    	var send = function(){
    		var searchUrl = $("#search").val();
    		var searchType = $("#searchType").html();
    		var contentType = 'application/json;charset=UTF-8';
    		var data = {};
    		var getParam = {};
    		var bodyParam;
    		
    		var reqUrl = searchUrl;
    		
    		$("#paramCont").find("input[name='key']").each(function(i,v){
    			var key = $(v).val();
    			if(key == ''){
    				return 1;
    			}
    			var desc = $(v).parent().parent().find("textarea[name='desc']").val();
    			getParam[key]=desc;
    			if(i ==0){
    				reqUrl+= "?"+key+"="+desc;
    			} else {
    				reqUrl+= "&"+key+"="+desc;
    			}
    		});
    		
    		if(searchType == 'GET'){
    			contentType = 'application/json;charset=UTF-8';
    		} else if(searchType == 'POST'){
    			contentType = 'application/json';
    			if($("#bodyParam").val() != ''){
    				bodyParam = $("#bodyParam").val();
    				data = bodyParam;
    			}
    		}
    		
    		$.ajaxData({url: reqUrl, type: searchType, dataType: "json", data: data, headers: {'Content-Type': contentType},
    		    success: function (res) {
    		    	try {
    		    		$("#returnPre").html(JSON.stringify(res, null, "    "));
    		    	} catch(er){
    		    	}
    		        
    		        $.ajaxData({url: "/index-save", type: "POST", dataType: "json",
    	    		    data: {url:searchUrl,type:searchType,
    	    		    	getParam:JSON.stringify(getParam),
    	    		    	bodyParam,
    	    		    	ret:JSON.stringify(res)},
    	    		    success: function (res) {
    	    		    	initMenu();    		        
    	    		    }
    	    		});
    		    },
    		    error:function(res){
    		    	$("#returnPre").html("接口调用出错");
    		    }
    		})
    	}
    	$(function(){
    		$("#paramTable").loadAddData({list:[]});
    		loadParam();
    		
    		clickReq();
    		
    		initMenu();
    		
    	});
    </script>
  </head>
  <body>
    <div class="body" layout:fragment="content">
        <div class="head">
        	<div class="head-user">
        		<span class="head-user-info" th:text="${session.user.name}"></span>
        		<a href="logout" class="head--user-info">退出</a>
        	</div>
        </div>

        <div class="content">
            <div class="content-table">
                <div class="left">
                    <div class="left-sys">
                        <div class="sidebar-content">
                            <div class="sidebar-inner">
                                <div class="sidebar-fold"></div>
                                <script type="text/template" id="menuTable">
								#for(sys:syss)#
								<div class="sidebar-nav">
									
                                    <div class="sidebar-title">
                                        <div class="sidebar-title-inner">
                                            <div class="sidebar-title-text">#{sys.name}#</div>
                                            <div class="sidebar-title-desc">#{sys.description}#</div>
                                        </div>

                                    </div>
                                    <ul class="sidebar-trans">
										<li>
                                            <a href="javascript:clickModel(#{sys.id}#)"><span class="nav-title">默认模块</span></a>
                                        </li>
										#for(model:sys.models)#
                                        <li>
                                            <a href="javascript::clickModel(#{sys.id}#, #{model.id}#)"><span class="nav-title">#{model.name}#</span></a>
                                        </li>
										#endfor#
                                    </ul>
                                </div>
								#endfor#
								</script>

                            </div>

                        </div>

                    </div>
                    <div class="left-api">
                        <div class="product-content">
                        	<script type="text/template" id="apiTable">
                            <div class="product-nav-scene">
                                <div class="product-nav-title">
                                    <strong>#{name}#</strong>
                                    <div class="product-nav-desc">#{description}#</div>
                                </div>
                                <div class="product-nav-list">
                                    <ul>
										#for(api:apis)#
                                        <li><a href="javascript:clickApi(#{api.id}#)">
											<span class="product-nav-type">#{api.type}#</span> #{api.name}#</a>
										</li>
										#endfor#
                                    </ul>
                                </div>
                            </div>
							</script>
                        </div>
                    </div>


                </div>
                <div class="cont">
                    <div class="search-box">
                        <div class="search-block">
                            <div class="search-cont">
                                <div class="search-select">
                                    <a href="javascript:" class="search-select-title" id="searchType">GET</a>
                                    <div class="search-option">
                                        <div class="search-option-block">
                                            <div class="search-option-text"><a href="javascript:" onclick="$('#searchType').html('POST');changeReqInfo();">POST</a></div>
                                            <div class="search-option-text"><a href="javascript:" onclick="$('#searchType').html('GET');changeReqInfo();">GET</a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="search-form-box">
                                    <div class="search-form">
                                        <div class="search-form-text">
                                        	<input type="text" id="search" onchange="checkSeachUrl()" value=""/>
                                        </div>
                                        <button onclick="send()">Send</button>
                                    </div>
                                </div>
                            </div>
                            <script type="text/template" id="testTable">
                            <div class="search-test">
								#for(test:tests)#
                                <a href="javascript:" class="search-test-item">#{test.name}#</a>
								#endfor#
                            </div>
							</script>
                        </div>

                    </div>
                    <div class="tables-block">
                    	<ul class="table-nav-tabs">
                            <li class="active" id="reqBtn"><a href="javascript:" onclick="clickReq()">请求</a></li>
                            <li id="workBtn"><a href="javascript:" onclick="clickWork()">文档</a></li>
                        </ul>
                        <div id="req">
                        <div class="table-box">
                            <div class="table-block">
                                <h4 class="table-title"><strong>Params</strong></h4>
                                <div class="table-cont" id="paramCont">
                                    <table border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                            <tr>
                                                <th width="200">Key</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        	<script type="text/template" id="paramTable">
											#for(data:list)#
                                            <tr>
                                                <td><input onchange="loadParam(this)" type="text" class="table-input" name="key" value="#{data.key}#" placeholder="Key"/></td>
                                                <td><textarea placeholder="Value" class="table-input" name="desc" 
                                                              onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);">#{data.value}#</textarea></td>
                                            </tr>
											#endfor#
											</script>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="table-box" id="bodyHtml" style="display: none;">
                            <div class="table-block">
                            	<h4 class="table-title"><strong>Body</strong></h4>
                                <div class="table-cont">
                                	<textarea rows="3" class="table-body" id="bodyParam"></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <div class="table-box">
                            <div class="table-block">
                            	<h4 class="table-title"><strong>Return</strong></h4>
                                <div class="table-cont">
                                	<pre class="table-coding" id="returnPre"></pre>
                                </div>
                            </div>
                        </div>
                        </div>
                        
                        <div id="work">
                        
                        <div class="table-box">
                        	<script type="text/template" id="apiWork">
							<div class="table-block">
                            	<h4 class="table-title"><strong>名称</strong><a href="/doc/sys?sysId=#{api.sysId}# #api_#{api.id}#" target="_blank" class="table-title-word">打开文档</a></h4>
                                <div class="table-cont">
                                	<textarea rows="2" class="table-body" onchange="changeDesc(#{api.id}#, 'API_NAME', this)">#{api.name}#</textarea>
                                </div>
                            </div>
                            <div class="table-block">
                            	<h4 class="table-title"><strong>说明</strong></h4>
                                <div class="table-cont">
                                	<textarea rows="3" class="table-body" onchange="changeDesc(#{api.id}#, 'API_DESC', this)">#{api.description}#</textarea>
                                </div>
                            </div>
							</script>
                        </div>
                        
                        <div class="table-box">
                            <div class="table-block">
                                <h4 class="table-title"><strong>Params</strong></h4>
                                <div class="table-cont">
                                <script type="text/template" id="paramTableWork">
                                    <table border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                            <tr>
                                                <th width="40"></th>
                                                <th width="200">字段</th>
                                                <th>说明</th>
                                            </tr>
                                        </thead>
                                        <tbody>
											#for(data:list)#
                                            <tr data-tt-id="#{data.id}#" data-tt-parent-id="#{data.parentId}#">
                                                <td><input type="checkbox" name="boxId" value="REQ_#{data.id}#" class="table-cbox"/></td>
                                                <td><span class="table-input table-input-label">#{data.name}#</span></td>
                                                <td><textarea placeholder="Desc" class="table-input" onchange="changeDesc(#{data.id}#, 'REQ', this)" name="desc"
                                                              onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);">#{data.description}#</textarea></td>
                                            </tr>
											#endfor#
                                        </tbody>
                                    </table>
								</script>
                                </div>
                                <div class="table-btn-block">
                                	<button class="table-btn" onclick="batchRemove()">批量删除</button>
                                </div>
                            </div>
                        </div>
                        
                        
                        <script type="text/template" id="bodyTableWork">
						#if(list.length!=0)#
						<div class="table-box">
                            <div class="table-block">
                                <h4 class="table-title"><strong>Body</strong></h4>
                                <div class="table-cont">
                                    <table id="bodyWork">
                                        <thead>
                                            <tr>
                                                <th width="40"></th>
                                                <th width="200">字段</th>
                                                <th>说明</th>
                                            </tr>
                                        </thead>
                                        <tbody>
											#for(data:list)#
                                            <tr data-tt-id="#{data.id}#" name="treeParam" data-tt-parent-id="#{data.parentId}#">
                                                <td><input type="checkbox" name="boxId" value="REQ_#{data.id}#" class="table-cbox"/></td>
                                                <td><span class="table-input table-input-label">#{data.name}#</span></td>
                                                <td><textarea placeholder="Desc" class="table-input" onchange="changeDesc(#{data.id}#, 'REQ', this)" name="desc"
                                                              onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);">#{data.description}#</textarea></td>
                                            </tr>
											#endfor#
											
                                        </tbody>
                                    </table>
									
                                </div>
                            </div>
							<div class="table-btn-block">
                                <button class="table-btn" onclick="batchRemove()">批量删除</button>
                            </div>
						</div>
						#endif#
						</script>
                        
                        
                        <div class="table-box">
                            <div class="table-block">
                                <h4 class="table-title"><strong>Return</strong></h4>
                                <div class="table-cont">
                                <script type="text/template" id="retTableWork">
                                    <table border="0" cellspacing="0" cellpadding="0" id="retWork">
                                        <thead>
                                            <tr>
                                                <th width="40"></th>
                                                <th width="200">字段</th>
                                                <th>说明</th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody>
                                        	
											#for(data:list)#
                                            <tr data-tt-id="#{data.id}#" name="treeParam" data-tt-parent-id="#{data.parentId}#">
                                                <td><input type="checkbox" name="boxId" value="RET_#{data.id}#" class="table-cbox"/></td>
                                                <td><span class="table-input table-input-label">#{data.name}#</span></td>
                                                <td><textarea placeholder="Desc" class="table-input" onchange="changeDesc(#{data.id}#, 'RET', this)" name="desc" 
                                                              onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);">#{data.description}#</textarea></td>
                                            </tr>
											#endfor#
											
                                        </tbody>
                                    </table>
								</script>
                                </div>
                                <div class="table-btn-block">
                                	<button class="table-btn" onclick="batchRemove()">批量删除</button>
                                </div>
                                
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>